<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="layui/css/layui.css">
	<script src="layui/layui.js"></script>
	<script src="js/vue.min.js"></script>

	<style>
		.layui-card-header h1 {
			font-size: 18px;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.6);
		}

		#personal .layui-form-label {
			font-size: 15px;
			color: rgba(0, 0, 0, 0.8);
		}

		#personal .layui-input {
			width: 200px;
			background: #f2f2f2;
			border-color: #e5e5e5;
			box-shadow: none;
			border-radius: 3px;
			border: 1px solid #dfe3e9;
			color: rgba(0, 0, 0, 0.8);
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="layui-card">
			<div class="layui-card-header">
				<h1>修改头像</h1>
			</div>
			<div class="layui-card-body">
				<div class="layui-upload">
					<img v-if="image==null" id="pic" :src=`http://localhost:9999/layui/file/head/default.jpg` style="width:160px;height:160px" />
					<img v-else id="pic" :src=`http://localhost:9999/layui/file/head/${image}` style="width:160px;height:160px" />
					<button type="button" class="layui-btn" id="browser-pic">
						<i class="layui-icon">&#xe67c;</i>浏览图片
					</button>
					<button type="button" class="layui-btn" id="btn_ok">
						<i class="layui-icon">&#xe67c;</i>确定修改
					</button>
				</div>
			</div>
		</div>



		<div class="layui-card">
			<div class="layui-card-header">
				<h1>个人信息</h1>
			</div>
			<div id="personal" class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">登录手机</label>

						<div class="layui-inline">
							<input type="text" id="phone" lay-verify="title" autocomplete="off" class="layui-input"
								value="13417747371" disabled>
						</div>
						<div class="layui-inline">
							<input type="button" id="changeTelBtn" class="layui-btn" data-type="reload" value="更改号码">
						</div>
						<div class="layui-inline">
							<input type="button" id="unbindTelBtn" class="layui-btn" data-type="reload" value="解绑">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">登录密码</label>
						<div class="layui-inline">
							<input type="password" id="password" lay-verify="required" autocomplete="off" class="layui-input"
								value="123456" disabled>
						</div>
						<div class="layui-inline">
							<input type="button" id="changePassBtn" class="layui-btn" data-type="reload" value="修改密码">
						</div>
					</div>
				</form>
			</div>
		</div>


		<!-- 修改表单开始 -->
		<div id="container" style="display: none">
			<form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

				<div class="layui-form-item">
					<label class="layui-form-label">当前密码</label>
					<div class="layui-input-block">
						<input type="text" id="current-pass" name="password" autocomplete="off" class="layui-input"
							placeholder="输入当前帐号密码" />
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">新密码</label>
					<div class="layui-input-block">
						<input type="text" id="new-pass" name="newPass" autocomplete="off" class="layui-input"
							placeholder="输入新密码" />
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">确认密码</label>
					<div class="layui-input-block">
						<input type="text" id="confirm-pass" name="confirmPass" autocomplete="off" class="layui-input"
							placeholder="输入确认密码" />
					</div>
				</div>

			</form>
		</div>
		<!-- 修改表单结束 -->
	</div>


</body>


<script>

	// 加载layui模块
	layui.use(['jquery', 'table', 'layer', 'form', 'upload'], function () {
		// 1.获取各模块的实例
		var $ = layui.jquery;
		var table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		var upload = layui.upload;


		// 2.弹出修改密码表单
		$("#changePassBtn").on("click", function () {
			layer.open({
				type: 1,
				title: '修改密码',
				area: ['50%', '20em'],
				resize: false,
				content: $("#container"),
				btn: ['确认', '取消'],
				btn1: function (index) {
					// 1.1)验证数据的合法性
					if ($('#current-pass').val() == '') {
						layer.msg("当前密码不能为空");
						$('#current-pass').focus();
						return false;
					}

					// 1.2)修改数据
					$.ajax({
						url: 'http://localhost:9999/layui/api/user/changePwd',
						type: 'post',
						data: $('#updateForm').serialize(),
						dataType: 'json',
						beforeSend: function (xhr) {
							// 使用请求头的方式传递
							xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem("token"))
						},
						success: function (data) {
							if (data.code == 200) {
								// 弹出信息
								layer.msg('修改成功，重新登录', { icon: 1 });

								// 关闭层
								layer.close(index);

								setTimeout(() => {
									top.location.href = "index.html";
								}, 2000)
							} else {
								layer.msg(data.msg);
							}
						}
					});
				}
			});
		});

		// 3.上传接口
		var uploadInst = upload.render({
			// //绑定浏览文件元素
			elem: '#browser-pic',		
			
			// 实现上传功能的服务器端程序
			url: 'http://localhost:9999/layui/api/user/upload',	
			
			// 设置请求头，实现用户认证
			headers: {
				Authorization: "Bearer " + localStorage.getItem("token")
			},

			// 设置允许上传的文件类型
			accept: 'file',		

			// 绑定提交上传的按钮
			bindAction: '#btn_ok', 	

			// 设置允许上传的文件后缀
			exts: 'jpg|png|jpeg',	

			// 设计允许上传文件的大小，单位：KB				
			size: 10 * 1024,	
			
			// 绑定上传控件的字段名，便于服务器获取上传文件
			field: "attach",	

			// 设置不自动上传
			auto: false,	
				
			// 上传成功的回调
			done: function (res) {				
				//res参数：服务器响应回来的数据，可以封装为responseData对象
				console.info(res);
				//$("#pic").prop("src","${pageContext.request.contextPath}/upload/tx/"+res.data) ;

				//上传成功后，隐藏按钮，防止上传多次
				$("#btn_ok").hide();
				//layer.msg('上传成功');
				layer.msg('修改成功，重新登录', { icon: 1 });

				setTimeout(() => {
					top.location.href = 'index.html';
				}, 2000);

			},
			error: function () {			//上传失败的回调
				// 请求异常回调
				// layer.msg('图片上传失败');
				layer.msg('图片上传失败~~', { icon: 5 });
			},
			choose: function (obj) {		//选择文件后的回调
				obj.preview(function (index, file, result) {
					//console.log(index); 	//得到文件索引
					//console.log(file); 	//得到文件对象
					//console.log(result); 	//得到文件base64编码，比如图片

					//显示图片
					$("#pic").prop("src", result);
				});

				//显示提交按钮
				$("#btn_ok").show();
			}
		});
	});


	let vm = new Vue({
		el: '#app',
		data: {
			image: 'default.jpg'
		},
		mounted() {
			let image = localStorage.getItem('image')
			if (image != undefined || image != '' || image != null) {
				this.image = image;
			}
		}
	});



</script>

</html>